<template lang="pug">
	.find-hospital-wrap
		main-header(placeholder="搜索医院" @getValue="getSearch" confirmType="search" @confirm="searchHospital" ref="mainHeader")
		scroll-view.find-hospital-content(scroll-y @scrolltolower="scrollToLower")
			no-item(text="暂无相关医院" v-if="noItem")
			.hospital-list
				.hospital-item-wrap(v-for="item in list" :key="item.orgName")
					.hospital-item(@click="returnHospital(item)")
						.name {{item.orgName}}
						.address {{item.orgAddr || '无'}}

</template>

<script>
import mainHeader from '@/components/main-header'
import noItem from '@/components/no-item'
export default {
	name: 'findHospital',
	data() {
		return {
			search: '',
			noItem: false,
			list: [],
			overFlag: false,
			page: 0,
			size: 12
		}
	},
	created() {},
	onLoad() {
		Object.assign(this.$data, this.$options.data())
	},
	mounted() {
		this.getHospital()
	},
	methods: {
		getSearch(text) {
			text = text.toString().trim()
			this.search = text
		},
		searchHospital() {
			this.page = 0
			this.noItem = false
			this.list = []
			this.overFlag = false
			this.getHospital()
		},
		returnHospital(item) {
			this.wx.setStorage({
				key: 'findHospital',
				data: item
			})
			this.wx.setStorage({
				key: 'isReload',
				data: {
					reload: true
				}
			})
			this.$router.back()
		},
		getHospital() {
			this.wx.showLoading({
				title: '加载中',
				icon: 'none'
			})
			this.page++
			this.api.tzApi
				.getHospital({
					page: this.page,
					size: this.size,
					resourcesType: '',
					orgName: this.search
				})
				.then(data => {
					this.wx.hideLoading()
					if (data.responseFlag === '1') {
						this.overFlag = data.data.pages === data.data.current
						this.list = this.list.concat(data.data.records)
						this.noItem = this.list.length <= 0
					}
				})
				.catch(() => {
					this.wx.hideLoading()
					this.noItem = this.list.length <= 0
				})
		},
		scrollToLower() {
			!this.overFlag && this.getHospital()
		}
	},
	components: {
		mainHeader,
		noItem
	}
}
</script>

<style lang="stylus">
	.find-hospital-wrap
		.find-hospital-content
			position absolute
			top 100px
			bottom 0
			left 0
			right 0
			.hospital-list
				&>div:first-child
					margin-top 30px
				&>div:last-child
					.hospital-item
						border-bottom none
				.hospital-item-wrap
					padding 0 30px
					background-color white
					.hospital-item
						border-bottom borderStyle
						padding 40px 20px
						.name
							font-size 28px
							color blackFontColor1A
						.address
							margin-top 5px
							font-size 26px
							color grayFontColor
</style>
